import {createRouter, createWebHistory} from 'vue-router'
import 'element-plus/es/components/message/style/css';
import {ElMessage} from 'element-plus'
import {getTokenAtStorage} from '@/utils/tokens.js'

const router = createRouter({
    // history: createWebHashHistory(),
    history: createWebHistory(),
    routes: [
        {
            path: '/404',
            name: 'ERROR_404',
            component: () => import('@/views/404.vue')
        },
        {
            path: '/',
            name: 'home',
            meta: { title: 'home', pass: 'user' },
            component: () => import('@/views/MainPage.vue'),
            redirect: '/chats',
            children: [
                {
                    path: 'chats',
                    name: 'chats',
                    component: () => import('@/views/subpage/ChattingPage.vue'),
                    meta: { title: 'chats', pass: 'user' },
                },
                {
                    path: 'contacts',
                    name: 'contacts',
                    component: () => import('@/views/subpage/ContactsPage.vue'),
                    meta: { title: 'contacts', pass: 'user' },
                },
                {
                    path: 'groups',
                    name: 'groups',
                    component: () => import('@/views/subpage/GroupsPage.vue'),
                    meta: { title: 'groups', pass: 'user' },
                },
                {
                    path: 'notice',
                    name: 'notice',
                    component: () => import('@/views/subpage/NoticePage.vue'),
                    meta: { title: 'notice', pass: 'user' },
                },
                {
                    path: 'video',
                    name: 'video',
                    component: () => import('@/views/subpage/VideoPage.vue')
                },
            ]
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('@/views/LoginPage.vue')
        },
        {
            path: '/register',
            name: 'register',
            component: () => import('@/views/RegisterPage.vue')
        },
        {
            path: '/:pathMatch(.*)',
            redirect: "/404"
            //meta: { title: 'xxx', pass: 'user' }
        }
    ]

})


/**
 * @method 全局前置守卫
 *  参数类型 参数说明
 *      to: 将要跳转到的路由,
 *      from: 将要离开的路由,
 *      next: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed (确认的)
 */
router.beforeEach((to, from, next) => {
    console.debug(`[route] from (${from.path}) to (${to.path})`)
    if (to.path.indexOf("undefined") >= 0) {
        next(from.path)
        console.warn('对不起，请先登录后再操作')
        return
    }

    //用户是否已登录
    let loggedIn = getTokenAtStorage() !== null
    console.debug("loggedIn = " + loggedIn)

    //不需要登录权限时，放行
    if (to.meta.pass !== 'user') {
        //已登录后，不允许跳转登录页面
        let isToLogin = to.path.startsWith("/login")
        if (isToLogin && loggedIn) {
            if (from.path.indexOf("/login"))
                next("/")
            else {
                next(from.path)
            }
            return
        }
        next()
        return
    }

    //需要登录权限时，验证通过则放行，否则跳转登录页
    if (loggedIn) {
        next()  //有权限，放行
    } else {
        console.debug("无权限，需要登陆。。。")
        next("/login")
    }

})

router.afterEach(() => {

})

export default router
